{% extends "one_column_body.html" %}
{% block title %}{% trans title=email.title %}Preview of email "{{ title }}"{% endtrans %}{% endblock %}
{% block content %}
    <ol class="breadcrumb">
        <li><a href="{% url "list_emails" %}">{% trans %}Askbot emails{% endtrans %}:</a></li>
        <li>{{ email.title }}</li>
    </ol>
    <h1>{% trans title=email.title %}Preview of email "{{ title }}"{% endtrans %}</h1>
    <div>{% trans %}Description{% endtrans %}: {{ email.description }}</div>
    {% for sample in samples %}

        {% if samples|length > 1 %}
            <h2>{% trans num=loop.index %}Example {{ num }}{% endtrans %}</h2>
        {% endif %}

        {% if sample['error_message'] %}
            <div>{{ sample['error_message'] }}</div>
        {% else %}
            <div>{% trans %}Subject{% endtrans %}: <strong>"{{ sample['subject'] }}"</strong></div>
            <div>{% trans %}Body text (below, email styling preserved){% endtrans %}</div>
            <div><iframe id="js-email-body-{{ loop.index }}" width="100%"></iframe></div>{# use iframe to render styling correctly #}
            <script type="text/javascript">
                {# adds content of the email to the iframe #}
                (function() {
                    var iframe = document.getElementById('js-email-body-{{ loop.index }}');
                    var doc = iframe.contentDocument ? 
                            iframe.contentDocument : 
                            (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);
                    doc.write("{{ sample['body']|escapejs }}");
                    iframe.style.height = 0;
                    iframe.style.height = doc.body.scrollHeight + 'px';
                })();
            </script>
        {% endif %}

    {% endfor %}
{% endblock %}
